【JavaScript】インクリメント（++） / デクリメント（–） - 変数の値を１変化させる

JavaScriptのインクリメントとデクリメントについて解説します。

インクリメント

インクリメントは“変数（数値型）の値を１加算する演算”です。

演算子（加算子）は++で表し、前置加算子と後置加算子の２つの使い方があります。

この２つの違いはインクリメントの実行タイミングです。

前置加算子

前置加算子は“変数の値を『１加算』した後に『値の参照』を行います。”

基本構文

++変数

サンプル

let num = 10;

___ih_hl_start
let result = ++num;
___ih_hl_end

console.log('[ num ]    : ' + num);
console.log('[ result ] : ' + result);

[ num ]    : 11
[ result ] : 11

３行目の++numがインクリメント（前置加算子）です。

３行目は最初に変数numの値を1加算し、変数numの値が11になります。

その後、変数numの値（11）を参照し、変数resultに代入します。

実行結果から各変数の値は11であることが分かります。

後置加算子

後置加算子は“変数の『値を参照』した後に『１加算』します。”

基本構文

変数++

サンプル

let num = 10;

___ih_hl_start
let result = num++;
___ih_hl_end

console.log('[ num ]    : ' + num);
console.log('[ result ] : ' + result);

[ num ]    : 11
[ result ] : 10

３行目のnum++がインクリメント（後置加算子）です。

３行目は最初に変数numの値（10）を参照し、変数resultに代入します。

その後、変数numの値を１加算し、変数numの値が11になります。

実行結果からも変数resultの値は変数numをインクリメントする前の値であることが分かります。

このように前置と後置は変数の値をインクリメントするタイミングが異なり、“前置は値を参照する前、後置は値を参照した後”にインクリメントを実行します。

デクリメント

デクリメントは“変数（数値型）の値を１減算する演算”です。

演算子（減算子）は--で表し、前置減算子と後置減算子の２つの使い方があります。

この２つの違いはデクリメントの実行タイミングです。

前置減算子

前置減算子は“変数の値を『１減算』した後に『値の参照』を行います。”

基本構文

--変数

サンプル

let num = 10;

___ih_hl_start
let result = --num;
___ih_hl_end

console.log('[ num ]    : ' + num);
console.log('[ result ] : ' + result);

[ num ]    : 9
[ result ] : 9

３行目の--numがデクリメント（前置減算子）です。

３行目は最初に変数numの値を1減算し、変数numの値が9になります。

その後、変数numの値（9）を参照し、変数resultに代入します。

実行結果から各変数の値は9であることが分かります。

後置減算子

後置減算子は“変数の『値を参照』した後に『１減算』します。”

基本構文

変数--

サンプル

let num = 10;

___ih_hl_start
let result = num--;
___ih_hl_end

console.log('[ num ]    : ' + num);
console.log('[ result ] : ' + result);

[ num ]    : 9
[ result ] : 10

３行目のnum--がデクリメント（後置減算子）です。

３行目は最初に変数numの値（10）を参照し、変数resultに代入します。

その後、変数numの値を１減算し、変数numの値が9になります。

実行結果からも変数resultの値は変数numをデクリメントする前の値であることが分かります。

このように前置と後置は変数の値をデクリメントするタイミングが異なり、“前置は値を参照する前、後置は値を参照した後”にデクリメントを実行します。

処理早見表

前置加算子、後置加算子、前置減算子、後置減算子の処理早見表を用意しましたのでご活用ください。